<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="UTF-8">

        var page = {

            init: function () {
                $("#upload").click($.proxy(this.upload, this));
            },

            upload: function () {
                var file = $("#file")[0].files[0],  //文件对象
                    size = file.size,        //总大小
                    fileName = file.name,   //文件名
                    succeed = 0;        //上传成功分片数

                //每次分片的文件大小  以2MB为一个分片
                var shardSize = 2 * 1024 * 1024;
                var chunkCount = Math.ceil(size / shardSize);  //总片数

                //批次号要每次都唯一，这里方便测试写固定了
                var batchNo = fileName;
                for (var i = 0; i < chunkCount; ++i) {
                    //计算每一片的起始与结束位置
                    var start = i * shardSize;
                    var end = Math.min(size, start + shardSize);
                    //构造一个表单，FormData是HTML5新增的
                    var form = new FormData();
                    form.append("file", file.slice(start, end));  //slice方法用于切出文件的一部分
                    form.append("chunkCount", chunkCount);  //总片数
                    form.append("batchNo", batchNo);          //批次编号
                    form.append("fileName", fileName);  //文件名
                    form.append("chunkNo", i + 1);        //分片序号  当前是第几片

                    $.ajax({
                        url: "http://localhost:8080/springboot-test-file/rest/file/v1/upload",
                        type: "POST",
                        data: form,
                        async: true,        //异步
                        processData: false,  //很重要，告诉jquery不要对form进行处理
                        contentType: false,  //很重要，指定为false才能形成正确的Content-Type
                        success: function () {
                            ++ succeed;
                            $("#output").text(succeed + " / " + chunkCount);
                        }
                    });
                }
            }
        };
        $(function () {
            page.init();
        });

    </script>
</head>
<body>
<input type="file" id="file"/>
<button id="upload">上传</button>
<span id="output" style="font-size:12px">等待</span>
</body>
</html>